<script setup lang="ts">
type ViewTypeEnum = "button" | "select" | "switch" | "radio" | "checkbox";
import IconSun from "@/components/icons/IconSun.vue";
import IconMoon from "@/components/icons/IconMoon.vue";

interface Props {
  viewType: ViewTypeEnum;
}
const props = withDefaults(defineProps<Props>(), {
  viewType: "switch",
});
</script>

<template>
  <div>
    <use-theme v-if="viewType == 'button'">
      <template v-slot="{ theme, toggle }">
        <el-button v-if="theme == 'dark'" @click="() => toggle('light')"
          >LIGHT</el-button
        >
        <el-button v-if="theme == 'light'" @click="() => toggle('dark')"
          >DARK</el-button
        >
      </template>
    </use-theme>
    <use-theme v-if="viewType == 'select'">
      <template v-slot="{ theme, toggle }">
        <el-select :model-value="theme" @change="(val) => toggle(val)">
          <el-option value="light" label="LIGHT"></el-option>
          <el-option value="dark" label="DARK"></el-option>
        </el-select>
      </template>
    </use-theme>
    <use-theme v-if="viewType == 'switch'">
      <template v-slot="{ theme, toggle }">
        <el-switch
          :model-value="theme"
          active-value="dark"
          inactive-value="light"
          @change="(val) => toggle(val + '')"
        >
          <template #active-action>
            <IconMoon />
          </template>
          <template #inactive-action>
            <IconSun />
          </template>
        </el-switch>
      </template>
    </use-theme>
    <use-theme v-if="viewType == 'radio'">
      <template v-slot="{ theme, toggle }">
        <el-radio-group
          :model-value="theme"
          @change="(val) => toggle(val + '')"
        >
          <el-radio label="light">LIGHT</el-radio>
          <el-radio label="dark">DARK</el-radio>
        </el-radio-group>
      </template>
    </use-theme>
    <use-theme v-if="viewType == 'checkbox'">
      <template v-slot="{ theme, toggle }">
        <el-checkbox
          :model-value="theme"
          false-label="light"
          true-label="dark"
          :label="theme"
          size="large"
          @change="(val) => toggle(val + '')"
        />
      </template>
    </use-theme>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: space-around;
}
</style>
